<template>
  <div id="movieInfo">
    <div id="movieBanner">
       <img class="movieImg" :src="movieInfo[0].movieImg" alt="">
        <div id="gameId">
          <h1 class="movieInfoTitle darkFont">{{movieInfo[0].movieName}}</h1>
          <div id="movieInfo-fol" class="fontsize-18">
            <p class="darkFont"><span style="font-weight: 900">{{movieInfo[0].movieFollower}}&nbsp;</span>名关注者</p><div class="dot">•</div>
            <span class="labInfo" style="background-color: #0a80c1;"><router-link to="/home/movie" style="color: white">电影</router-link></span><span class="labInfo" v-for="lab in (movieInfo[0].movieGen || ' ').split(' ')" :key="lab.id">{{lab}}</span>
          </div>
          <div style="font-size:20px; display: flex;align-items: center;margin-top: 10px">
            <span class="darkFont" style="font-size:25px;font-style: oblique;font-weight: 700;margin-right: 10px;">{{movieLevAvg}}<span style="font-size:15px;">分</span></span>
            <span id="movieLevAvg">
            <ul v-if="movieLevAvg === 0">
          <li>★</li>
          <li>★</li>
          <li>★</li>
          <li>★</li>
          <li>★</li>
        </ul>
            <ul v-if="movieLevAvg>0 && movieLevAvg<=0.5">
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 45%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li>★</li>
          <li>★</li>
          <li>★</li>
          <li>★</li>
        </ul>
            <ul v-if="movieLevAvg>0.5 && movieLevAvg<=1">
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li>★</li>
          <li>★</li>
          <li>★</li>
          <li>★</li>
        </ul>
            <ul v-if="movieLevAvg>1 && movieLevAvg<=1.5">
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 45%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li>★</li>
          <li>★</li>
          <li>★</li>
        </ul>
            <ul v-if="movieLevAvg>1.5 && movieLevAvg<=2">
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li>★</li>
          <li>★</li>
          <li>★</li>
        </ul>
            <ul v-if="movieLevAvg>2 && movieLevAvg<=2.5">
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 45%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li>★</li>
          <li>★</li>
        </ul>
            <ul v-if="movieLevAvg>2.5 && movieLevAvg<=3">
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li>★</li>
          <li>★</li>
        </ul>
              <ul v-if="movieLevAvg>3 && movieLevAvg<=3.5">
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 45%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li>★</li>
        </ul>
            <ul v-if="movieLevAvg>3.5 && movieLevAvg<=4">
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li>★</li>
        </ul>
            <ul v-if="movieLevAvg>4 && movieLevAvg<=4.5">
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 45%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
        </ul>
            <ul v-if="movieLevAvg>4.5 && movieLevAvg<=5">
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
          <li style="background-image: -webkit-linear-gradient(left, #ffc125 100%, gray 0%);
            -webkit-background-clip: text;-webkit-text-fill-color: transparent;">★</li>
        </ul>
          </span>
          </div>
          <button class="button buttonInInfo flex --oneLine line-center buttonMovie" @click="followMovie" v-if="!followed">
            关注这个圈子
          </button>
          <button class="button buttonInInfo flex --oneLine line-center buttonMovie movieClicked" @click="followMovie" v-else>
            已关注
          </button>
        </div>
    </div>
    <movie-menu/>
    <keep-alive>
      <router-view :pushMovieId="movieInfo[0].movieId"/>
    </keep-alive>
  </div>
</template>

<script>
  import movieMenu from '../../functional unit/movieMenu'
  import api from "../../../model/api";

  export default {
    name: 'movieInfo',
    data(){
      return {
         movieInfo: [{
          movieName: '',
          movieId: '',
          movieNameEn: '',
          movieGen: '',
          movieImg: '',
          movieFollower: '',
        }],
        followed: false,
        movieLevAvg: 0,
      }
    },
    components:{
      movieMenu,
    },

    methods:{
      async addMovieViewNum(){
        const _movieId = this.movieInfo[0].movieId
        const {data:res} = await this.$axios.post('v1/movieViewNum',{movieId: _movieId})
        if(res.code === 200){
          return true
        }
      },
      getMovieInfo() {
        api.getMovies().then(res => {
          let id = this.$route.params.id
          let movieList = res.data
          this.movieInfo = movieList.filter(function (Obj) {
            if( Obj.movieNameEn === id){
              if(Obj.movieFollower >= 1000){
                Obj.movieFollower = Obj.movieFollower/1000 + 'k'
                return Obj
              }else{
                return Obj
              }
            }
          })
          this.addMovieViewNum()
        })
      },
      async followMovie(){
        if(this.loginState === true){
          const followArr = {
            userId: JSON.parse(sessionStorage.user).userId,
            movieId: this.movieInfo[0].movieId
          }
          if(this.followed === false){
            const {data:res} = await this.$axios.post("v1/followMovie",followArr)
            if(res.code === 200){
              this.$message.success("关注圈子成功！")
              this.followed = true
              this.movieInfo[0].movieFollower++
            }else{
              this.$message.error("关注圈子失败！请检查网络连接。")
            }
          }else if(this.followed === true){
            const {data:res} = await this.$axios.post("v1/unfollowMovie",followArr)
            if(res.code === 200){
              this.$message.success("取消成功")
              this.followed = false
              this.movieInfo[0].movieFollower--
            }else{
              this.$message.error("取消圈子失败！请检查网络连接。")
            }
          }
        }else{
          this.$message.error("请先登陆")
        }


      },
      async followState(){
        const followArr = {
          userId: JSON.parse(sessionStorage.user).userId,
          movieId: this.movieInfo[0].movieId
        }
        const {data:res} = await this.$axios.post('v1/judgeMovieFollow',followArr)
        if(res.code === 200){
          this.followed = true
        }
        if(res.code === 500){
          this.followed = false
        }
      },
      async getMovieLevAvg(){
        const {data:res} = await this.$axios.post('v1/getMovieLevAvg',{movieId:this.movieInfo[0].movieId})
        if(res.code === 200){
          this.movieLevAvg = res.data.cinAvg
        }
      },
      isLogin(){
        if(sessionStorage.token){
          this.followState()
          this.loginState = true
        }
      },

    },

    created () {
      this.getMovieInfo()
    },
    mounted() {

    },
    beforeUpdate() {
      this.isLogin()
      this.getMovieLevAvg()
    },

  }

</script>

<style lang="less" scoped>
  #movieInfo{
    width: 100%;
    margin: 30px;
    #movieBanner{
      letter-spacing: 2px;
      width: 100%;
      display: flex;

      /*align-items: center;*/
    }
    #movieLevAvg ul{
      display: flex;
      color: gray;
    }
    h2{
      font-size: 60px;
    }
    #movieInfo-fol{
      display: flex;
      align-items: center;
      /*background-color: red;*/
    }
    .movieImg{
      width: 140px;
      border-radius: 6px;
      margin-right: 30px;
      /*box-shadow: -5px 5px 0 #ce52ff;*/
    }
    #gameId{
      position: relative;
    }
   button{
     width: 170px;
     position: absolute;
     bottom: 0;
   }
    .buttonMovie{
      background-color: #0a80c1;
      color: white;
      transition: all 0.1s ease-in-out;
      font-weight: 300;
    }
    .buttonMovie:hover{
      opacity: 0.8;
    }
    .movieClicked{
      background-color: #0a80c1;
      color: rgba(255, 255, 255, 0.50);
    }

  }

</style>
